<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
  <style>
    .box-item{
        width: 100px;
        height: 50px;
        border: 1px solid #eee;
        float: left;
        margin-left: 10px;
    }
    </style>
<body>
    <div class="box">
        <h2>点击切换颜色</h2>
        <div class="box-item"></div>
        <div class="box-item"></div>
        <div class="box-item"></div>
    </div>
  <script>
     let items=document.getElementsByClassName('box-item');
     for(let i=0;i<items.length;i++){
        items[i].onclick=function(){
            console.log(i);
            items[i].style.background='pink'
        }
     }
    //  数组的解构
    const fn=["a",'b',"c","d"];
    let [q1,q2,q3,q4]=fn;
    console.log(q1);
    console.log(q2);
    console.log(q3);
    console.log(q4);
    const obj={
        name:"aaaa",
        b:"xxxxxx",
        c:function(){
            console.log("cccccc");
        }
    }
    let {name,b,c}=obj;
    console.log(c);
    const aaa="你好";
    const bbb="中午吃什么"
    console.log(aaa+bbb);
    let Person=(name,age)=>{
        this.name=name;
        this.age=age;
    }
    // let me=new Person("xiao",30);
    // console.log(me);//Uncaught TypeError: Person is not a constructor
    // for (i=0;i<100;i++){

    // }

    function connect({host="127.0.0.1",username,password,part}){
        console.log(host);
        console.log(username);
        console.log(password);
        console.log(part);
    }
    const obj1={
        hist:"123456789",
        username:'ssssss',
        password:"123456",
        part:88888,
    }
    console.log(obj1);
 </script>
</body>
</html>